import React, {Component} from 'react';
import { Button, Checkbox, Form, Input } from 'antd';
import style from './MusicPu.module.less'
import {MusciaAddRequest, MusicPuRequest} from "@requests/Music";
import {toast} from "react-toastify";
const formdata = new FormData()
class MusicPu extends Component {
    state={
        user_music:null,
        music_img:null
    }
    change =(event) => {
        if(event.target.name === 'Img'){
            this.setState({
                music_img : event.target.files[0]
            })
        }else if(event.target.name === 'File'){
            this.setState({
                user_music : event.target.files[0]
            })
        }else{
          return
        }
    }
    onFinish = async (values) => {
        formdata.append('user_music',this.state.user_music)
        formdata.append('music_img',this.state.music_img)
        if(this.state.user_music === null){
            return  toast.warn('未上传乐谱', {
                autoClose: 1000,
            });
        }
        if(this.state.music_img === null){
            return  toast.warn('未上传图片', {
                autoClose: 1000,
            });
        }
        const response = await MusicPuRequest(formdata)
        let user = JSON.parse(sessionStorage.getItem("user"))
        // console.log(user)
        values['id'] = user.id
        values['user_music'] = response.user_music
        values['music_img'] = response.music_img
        const result = await MusciaAddRequest(values)
        if(result.code === 200){
            toast.success('发布成功', {
                autoClose: 1000,
            });
            this.props.history.push('/')
            return
        }
    };
   // onFinishFailed = (errorInfo) => {
   //      console.log('Failed:', errorInfo);
   //  };
    render() {

        return (
            <div className='center'>
                <div className={style.box}>
                    <p className={style.ptitle}>发布乐谱</p>
                    <Form
                        name="basic"
                        labelCol={{
                            span: 8,
                        }}
                        wrapperCol={{
                            span: 16,
                        }}
                        style={{
                            maxWidth: 600,
                        }}
                        onFinish={this.onFinish}
                        // autoComplete="off"
                        className = {style.form}
                    >
                        <Form.Item
                            label="标题"
                            name="title"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入标题',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="简介"
                            name="brief"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入简介',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>
                        <Form.Item label="图片"
                                   rules={[
                                       {
                                           required: true,
                                           message: '请上传图片',
                                       },
                                   ]}>
                            <input type="file"name="Img" onChange={this.change} accept="image/jpeg,image/jpg,image/png"  />
                        </Form.Item>
                        <Form.Item label="乐谱"
                                   rules={[
                                       {
                                           required: true,
                                           message: '请上传乐谱',
                                       },
                                   ]}>
                            <input type="file"name="File" onChange={this.change} accept='.gp5,.gpx' />
                        </Form.Item>

                        <Form.Item
                            wrapperCol={{
                                offset: 8,
                                span: 16,
                            }}

                        >
                            {/*<Button type="primary" htmlType="submit" style={{marginLeft:'120px'}}>*/}
                            {/*    发布*/}
                            {/*</Button>*/}
                            <button type='submit' style={{marginLeft:'120px',border:'0',width:'100px',height:'30px',backgroundColor:'skyblue',color:'white' }}>发布</button>
                        </Form.Item>
                    </Form>
                </div>

            </div>
        );
    }
}

export default MusicPu;